<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<style>
			#slide{
				height: 250px;
			}
			#slide div{
				height: 250px;
			}
			#slide img{
				height: 250px;
			}
			#list{
				margin-bottom: 49px;
				margin-top: 35px;
			}
			#list>li{
				height: 80px;
			}
			#list>li a h5,#list>li a p{
				color: #333333;
			}
			#list>li .right{
				/* text-align: right; */
				font-size:10px;
				position: absolute;
				right: 0;
				bottom:-5px;
				color: 	#4B0082;
			}
			#tab{
				touch-action: none;
			}
			#search{
				position: fixed;
				top:0;
				left: 0;
				border-radius:6px ;
				width: 100%;
			}
			/* .mui-search input{
				height: 49px;
			} */
			
		</style>
	</head>

	<body>
		<!-- 搜索框 -->
		<form action="" id="search">
			<div>
				<input type="text" class="mui-input-clear" placeholder="过滤公司输甲方或乙方">
			</div>
		</form>
		<!-- <header class="mui-bar mui-bar-nav">
			<form class="mui-input-group"  id="search">
				<div class="mui-input-row mui-search">
					<input type="text" class="mui-input-clear" placeholder="过滤公司输甲方或乙方">
				</div>
			</form>
		</header> -->
		
		<!-- <div class="mui-input-row mui-search">
		    <input type="search" class="mui-input-clear" placeholder="过滤公司输甲方或乙方">
		</div> -->

		 <!-- 图文列表 -->
		 <ul class="mui-table-view" id="list">
		 	
		 </ul>
		 
		 
		 <!-- 底部导航 -->
		 <nav class="mui-bar mui-bar-tab" id="tab">
		 	<a class="mui-tab-item mui-active" id="tab1">
		 		<span class="mui-icon mui-icon-home"></span>
		 		<span class="mui-tab-label">首页</span>
		 	</a>
		 	<a class="mui-tab-item" id="tab2">
		 		<span class="mui-icon mui-icon-compose"></span>
		 		<span class="mui-tab-label">发布详情</span>
		 	</a>
		 	<a class="mui-tab-item" id="tab3">
		 		<span class="mui-icon mui-icon-contact"></span>
		 		<span class="mui-tab-label">个人中心</span>
		 	</a>
		 	
		 </nav>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>
</html>
<script>
Date.prototype.format = function(fmt){
		  var o = {
		    "M+" : this.getMonth()+1,                 //月份
		    "d+" : this.getDate(),                    //日
		    "h+" : this.getHours(),                   //小时
		    "m+" : this.getMinutes(),                 //分
		    "s+" : this.getSeconds(),                 //秒
		    "q+" : Math.floor((this.getMonth()+3)/3), //季度
		    "S"  : this.getMilliseconds()             //毫秒
		  };
		
		  if(/(y+)/.test(fmt)){
		    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
		  }
		        
		  for(var k in o){
		    if(new RegExp("("+ k +")").test(fmt)){
		      fmt = fmt.replace(
		        RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));  
		    }       
		  }
		
		  return fmt;
		}
	
	window.onload=function(){
		
		// 处理公司列表
	
		var lists=window.localStorage.getItem("lists");
		// console.dir(JSON.parse(lists))
		// if(lists){
		// 	var datas=JSON.parse(lists);
		// 	var list=mui("#list")[0];
		// 	append(datas,list)
		// 	console.log("meiyouqingqiu")
		// }else{
			// 请求
			console.log("请求")
		mui.ajax('http://140.143.206.157:5000/api/v1/company',{
			data:{
				part:1
			},
			dataType:'json',//服务器返回json格式数据
			type:'get',//HTTP请求类型
			timeout:10000,//超时时间设置为10秒；
			headers:{'Content-Type':'application/json'},	              
			success:function(data){
				var data=data.info;
				console.log(JSON.stringify(data))
				// window.localStorage.setItem("lists",JSON.stringify(data))
				var list=mui("#list")[0];
				
				append(data,list)
				// console.log(list)
				var lis=mui("#list").on("tap",".mui-table-view-cell",function(event){
					console.dir(this.key)
					var id=this.key
					openurl("detail.html?id="+id,"detail.html",id);
				})
				console.log(lis)
			},
			error:function(xhr,type,errorThrown){
				//异常处理；
				console.log(type);
			}
		});
		// }
		// 处理底部导航
		var as=mui(".mui-bar").on("tap",'.mui-tab-item',function(event){
			console.dir(this.id)
			var id=this.id
			// console.log(event)
			// 打开新页面
			switch (id){
				case "tab1":openurl("index.html","index.html");
					break;
				case "tab2":openurl("fabu.html","fabu.html");
					break;
				case "tab3":openurl("login.html","login.html");
					break;
				default:openurl("index.html","index.html");
					break;
			}
			// openurl("fabu.html","fabu.html");
			
			
			// --------
			event.stopPropagation();
			event.preventDefault()
		});
		console.dir(as)
		function openurl(url,idname,id){
			mui.openWindow({
			    url:url,
			    id:idname,
			    styles:{
			      top:0,//新页面顶部位置
			      bottom:"50px",//新页面底部位置
			      width:"100%",//新页面宽度，默认为100%
			      height:"100%"//新页面高度，默认为100%
			      
			    },
			    extras:{
			      // .....//自定义扩展参数，可以用来处理页面间传值
				  id
			    },
			    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
			    show:{
			      // autoShow:true//页面loaded事件发生后自动显示，默认为true
			      // aniShow:animationType,//页面显示动画，默认为”slide-in-right“；
			      // duration:animationTime//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
			    },
			    waiting:{
			      autoShow:true,//自动显示等待框，默认为true
			      title:'正在加载...',//等待对话框上显示的提示内容
			      options:{
			        width:"100px",//等待框背景区域宽度，默认根据内容自动计算合适宽度
			        height:"60px"//等待框背景区域高度，默认根据内容自动计算合适高度
			        // ......
			      }
			    }
			})
		}
		function append(data,parent){
			var frag=document.createDocumentFragment();
			data.reverse().forEach(function(item,index){
				var time=new Date(item.reg_date)
				var li=document.createElement('li');
				li.key=item.id;
				li.className="mui-table-view-cell mui-media";
				li.innerHTML=`<a href="javascript:;" class="mui-navigate-right"><img class="mui-media-object mui-pull-left" src="imgs/03.jpg">
				<div class="mui-media-body">
				    <h5>${item.company_name}</h5>
					<p class="mui-ellipsis">${item.need}</p>
					<span class="right">${time.format('yyyy-MM-dd')}</span>
				</div>
			</a>`;
				frag.appendChild(li)
			})
			// var list=mui("#list")[0]
			parent.appendChild(frag);
		}
	}	
</script>